<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <link rel="canonical" href="https://getbootstrap.com/docs/4.4/examples/dashboard/">
        <!-- Favicons -->
        <meta name="theme-color" content="#563d7c">

        <title>Usefultag</title>
        <%= csrf_meta_tags %>
        <%= csp_meta_tag %>

        <script src="https://danish.dzunion.cn/cdn/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
        <link rel="stylesheet" href="https://danish.dzunion.cn/cdn/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
        <%= stylesheet_link_tag    "usefultag/application", media: "all" %>

        <style>
         .bd-placeholder-img {
             font-size: 1.125rem;
             text-anchor: middle;
             -webkit-user-select: none;
             -moz-user-select: none;
             -ms-user-select: none;
             user-select: none;
         }

         @media (min-width: 768px) {
             .bd-placeholder-img-lg {
                 font-size: 3.5rem;
             }
         }
         body {
             font-size: .875rem;
         }

         .feather {
             width: 16px;
             height: 16px;
             vertical-align: text-bottom;
         }

         /*
          * Sidebar
          */

         .sidebar {
             position: fixed;
             top: 0;
             bottom: 0;
             left: 0;
             z-index: 100; /* Behind the navbar */
             padding: 48px 0 0; /* Height of navbar */
             box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
         }

         .sidebar-sticky {
             position: relative;
             top: 0;
             height: calc(100vh - 48px);
             padding-top: .5rem;
             overflow-x: hidden;
             overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
         }

         @supports ((position: -webkit-sticky) or (position: sticky)) {
             .sidebar-sticky {
                 position: -webkit-sticky;
                 position: sticky;
             }
         }

         .sidebar .nav-link {
             font-weight: 500;
             color: #333;
         }

         .sidebar .nav-link .feather {
             margin-right: 4px;
             color: #999;
         }

         .sidebar .nav-link.active {
             color: #007bff;
         }

         .sidebar .nav-link:hover .feather,
         .sidebar .nav-link.active .feather {
             color: inherit;
         }

         .sidebar-heading {
             font-size: .75rem;
             text-transform: uppercase;
         }

         /*
          * Content
          */

         [role="main"] {
             padding-top: 133px; /* Space for fixed navbar */
         }

         @media (min-width: 768px) {
             [role="main"] {
                 padding-top: 48px; /* Space for fixed navbar */
             }
         }

         /*
          * Navbar
          */

         .navbar-brand {
             padding-top: .75rem;
             padding-bottom: .75rem;
             font-size: 1rem;
             background-color: rgba(0, 0, 0, .25);
             box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
         }

         .navbar .form-control {
             padding: .75rem 1rem;
             border-width: 0;
             border-radius: 0;
         }

         .form-control-dark {
             color: #fff;
             background-color: rgba(255, 255, 255, .1);
             border-color: rgba(255, 255, 255, .1);
         }

         .form-control-dark:focus {
             border-color: transparent;
             box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
         }
        </style>
    </head>
    <body>
        <nav class="navbar navbar-dark fixed-top bg-dark flex-md-nowrap p-0 shadow">
            <a class="navbar-brand col-sm-3 col-md-2 mr-0" href="#">Useful Tags</a>
            <input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">
            <ul class="navbar-nav px-3">
                <li class="nav-item text-nowrap">
                </li>
            </ul>
        </nav>

        <div class="container-fluid">
            <div class="row">
                <nav class="col-md-2 d-none d-md-block bg-light sidebar">
                    <div class="sidebar-sticky">
                        <% Usefultag::Tag.all_types.each do |type| %>
                        <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
                            <span>
                                <%= type.record_type %>
                            </span>
                            <a class="d-flex align-items-center text-muted" href="#" aria-label="Add a new report">
                                <span data-feather="plus-circle"></span>
                            </a>
                        </h6>
                        <ul class="nav flex-column mb-2">
                            <% Usefultag::Tag.all_name_with_type(type.record_type).each do |tag| %>
                            <li class="nav-item">
                                <%=link_to tag.name, tags_path(name: tag.name, type: tag.record_type), class: "nav-link" %>
                            </li>

                            <% end %>
                        </ul>

                        <% end %>
                    </div>
                </nav>

                <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4">
                    <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
                        <h1 class="h2">Dashboard</h1>
                    </div>

                    <!-- <canvas class="my-4 w-100" id="myChart" width="900" height="380"></canvas> -->

                    <h2></h2>
                    <div class="table-responsive">
        <%= yield %>

                    </div>
                </main>
            </div>
        </div>
        <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.9.0/feather.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
    
    </body>
</html>
